<nz-spin [nzSpinning]="false">
  <form nz-form [formGroup]="form" (submit)="save()">
    <nz-form-item nz-row >
      <nz-form-label [nzSpan]="5" nzRequired nzFor="pass">原密码</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入您的邮箱!">
        <input nz-input type="password" formControlName="pass" required />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row >
      <nz-form-label [nzSpan]="5" nzRequired nzFor="passnew">新密码</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入您的邮箱!">
        <nz-input-group 
          nzSize="default"
          nzAddonBeforeIcon="lock" [nzCompact]="true"
          nz-popover
          nzPopoverPlacement="right"
          nzPopoverTrigger="focus"
          [(nzPopoverVisible)]="visible"
          nzPopoverOverlayClassName="register-password-cdk"
          [nzPopoverOverlayStyle]="{ 'width.px': 240 }"
          [nzPopoverContent]="pwdCdkTpl"
        >
          <input nz-input type="password" formControlName="passnew" required />
        </nz-input-group>
        <ng-template #pwdCdkTpl>
          <div style="padding: 4px 0">
            <ng-container [ngSwitch]="status">
              <div *ngSwitchCase="'ok'" class="success">{{ 'validation.password.strength.strong' | i18n }}</div>
              <div *ngSwitchCase="'pass'" class="warning">{{ 'validation.password.strength.medium' | i18n }}</div>
              <div *ngSwitchDefault class="error">{{ 'validation.password.strength.short' | i18n }}</div>
            </ng-container>
            <div class="progress-{{ status }}">
              <nz-progress
                [nzPercent]="progress"
                [nzStatus]="passwordProgressMap[status]"
                [nzStrokeWidth]="6"
                [nzShowInfo]="false"
              ></nz-progress>
            </div>
            <p class="mt-sm">{{ 'validation.password.strength.msg' | i18n }}</p>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row >
      <nz-form-label [nzSpan]="5" nzRequired nzFor="passnewsecond">重复新密码</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请重复输入您的新密码!">
        <input nz-input type="password" formControlName="passnewsecond" required />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row>
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary" [disabled]="form.invalid">更新基本信息</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-spin>
